<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="300">
    您的浏览器不支持 Canvas
  </canvas>
  <script>
    /** @type {HTMLCanvasElement}*/
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d'); 

    // 开始绘制
    ctx.beginPath();
    // 将起始位置移到（100，100）的坐标上
    ctx.moveTo(100, 100);
    // 从当前点画一条线到（200，200）的位置
    ctx.lineTo(200, 200);
    // 再从当前点画一条线到 （100， 200）的位置
    ctx.lineTo(100, 200);

    // 上面的代码无法在画布上显示出来，需要着色
    // 1. fill(), 路径内部填充样式
    // 设置其他颜色, fillStyle 来设置
    ctx.fillStyle = 'green';
    ctx.fill();
    // 2. stroke()，给路径线条着色
    // 设置线条颜色，strokeStyle
    ctx.strokeStyle = 'red';

    // -------------------------
    // 设置线条的样式
    // 设置线条宽度， lineWidth
    ctx.lineWidth = 3;
    // 设置线条末端为圆角 lineCap
    ctx.lineCap = 'round';
    // 设置线条交接处为圆形 lineJoin
    ctx.lineJoin = 'round';
    // 设置线条为线段 setLineDash()
    ctx.setLineDash([10, 10]);
    ctx.stroke();
  </script>
</body>
</html>